<template>
  <div class="result-container">
    <div class="title-wrap">
      <h2 class="title">{{keywords}}</h2>
      <span class="sub-title">找到{{total}}个结果</span>
    </div>
    <el-tabs v-model="activeIndex">
      <el-tab-pane label="歌曲" name="songs">
        <table class="el-table">
          <thead>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </thead>
          <tbody>
            <tr class="el-table__row" 
            v-for="(item, index) in list"
            :key="item.id"
            @dblclick="PlayMusic(item.id)"
            >
              <td>{{index + 1}}</td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <span>{{item.name}}</span>
                    <span v-if="item.mvid != 0" class="iconfont icon-mv"></span>
                  </div>
                  <span v-if="item.alias.length != 0">{{item.alias[0]}}</span>
                </div>
              </td>
              <td>{{item.artists[0].name}}</td>
              <td>{{item.album.name}}</td>
              <td>{{item.duration | playTimeFormat}}</td>
            </tr>
          </tbody>
        </table>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="lists">
        <div class="items">
          <div class="item"
          v-for="item in playList"
          :key="item.id"
          @click="goPlayDetail(item.id)"
          >
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount | playNumFormat}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="MV" name="mv">
        <div class="items mv">
          <div class="item"
          v-for="item in mvs"
          :key="item.id"
          @click="$router.push(`/mv?id=${item.id}`)"
          >
            <div class="img-wrap">
              <img :src="item.cover" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{item.playCount | playNumFormat}}</div>
              </div>
              <span class="time">{{item.duration | playTimeFormat}}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{item.name}}</div>
              <div class="singer">{{item.artistName}}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Result, playMusic } from '../network/request'
export default {
  name: 'result',
  data() {
    return {
      activeIndex: 'songs',
  
      keywords: '',
      total: 0,
      limit: 20,
      page: 1,
      type: 1,

      list: [],
      playList: [],
      mvs: []
    };
  },
  watch: {
    activeIndex() {
      switch (this.activeIndex) {
        case 'songs':
          this.type = 1
          break
        case 'lists':
          this.type = 1000
          break
        case 'mv':
          this.type = 1004
          break
          
        default:
          break   
      }
      this.ResultList()
    }
  },
  created() {
    this.keywords = this.$route.query.InputValue;
    this.ResultList()
  },
  methods: {
    async ResultList() {
      const res = await Result(this.keywords, this.limit, this.page, this.type)
      console.log(res)
      // return
      if(this.type == 1) {
        this.list = res.result.songs;
        this.total = res.result.songCount;
      }else if(this.type == 1000) {
        this.playList = res.result.playlists;
        this.total = res.result.playlistCount;
      }else if(this.type == 1004) {
        this.mvs = res.result.mvs;
        this.total = res.result.mvCount;
      }
    },
    async PlayMusic(id) {
      const res = await playMusic(id)
      let url = res.data[0].url;
      this.$parent.musicUrl = url; 
    },
    goPlayDetail(id) {
      this.$router.push('/playlist?id=' + id)
    }
  },
};
</script>

<style >

</style>
